import React from "react";
import './-page.scss';

import 'weui';
import {picker as Picker} from 'weui.js';
import AddressJSON from '../../resources/data/address.json';
import {getRandomString} from "auxiliaries/extends/random";
import {observer, observable, action} from 'mobx.collection';
import {ReactHorizonInput} from "components/page/react-horizon-group";

function formatAddressJSON(json) {
    return json.map(x => {
        let {
            sub,
            name,
            id
        } = x;
        return {
            value: id,
            label: name,
            children: sub && sub.length > 0 ? formatAddressJSON(sub) : []
        };
    });
}

let formatAddressList = formatAddressJSON(AddressJSON);

@observer
class ReactSelectRegion extends React.Component {
    #id = getRandomString();
    #list = formatAddressList;
    @observable initShow = [120000, 120300, 120301];

    @observable value;
    @observable text = '';
    @observable options;

    setValue(props = this.props) {
        let regionId = props.value;
        if (regionId) {
            try {
                let model = regionId.split(',');
                regionId = model[model.length - 1];

            } catch (e) {

            }
            let province = Math.floor(regionId / 10000);
            let city = Math.floor((regionId - province * 10000) / 100);

            this.initShow = [province + '0000', province + '' + (city < 10 ? `0${city}` : city) + '00', regionId].map(x => +x);

            let provinceModel = this.#list.find(x => +x.value === +this.initShow[0]);
            let cityModel = provinceModel?.children.find(x => +x.value === +this.initShow[1]);
            let areaModel = cityModel?.children.find(x => +x.value === +this.initShow[2]);

            let result = [provinceModel, cityModel, areaModel];
            this.options = result;
            this.value = result?.[result?.length - 1];
            this.text = result.map(x => x?.label).filter(Boolean).join(' ') || '';
        }

    }

    componentWillMount() {
        this.setValue();
    }

    componentWillReceiveProps(nextProps) {
        this.setValue(nextProps);
    }

    @action
    async showPicker() {
        if (this.props.disabled) {
            return;
        }

        Picker(this.#list, {
            depth: 3,
            defaultValue: this.initShow,
            onChange: function onChange(result) {

            },
            onConfirm: (result) => {
                this.options = result;
                this.value = result?.[result?.length - 1];
                this.text = result.map(x => x.label).join(' ') || undefined;
                this.props.onChange?.(this);
            },
            id: this.#id
        });
    }

    @action
    onChange(e) {
        this.text = e.target.value;
    }

    render() {
        let {
            inputProps = {},
            onChange,
            value,
            regionId,
            ...rest
        } = this.props;

        return (
            <div className={"--react-select-region-container"} id={this.#id} onClick={this.showPicker.bind(this)}>
                <ReactHorizonInput {...rest} type={"text"} value={this.text} onChange={this.onChange.bind(this)}
                                   inputProps={{
                                       readonly: true,
                                       ...inputProps
                                   }}/>
            </div>
        );
    }
}

export default ReactSelectRegion;